<template>
  <view class="person-add">
    <image
      src="../../static/image/business/img_enterprist_agent_add_2.png"
      mode="widthFix"
      class="person-add__top"
    >
    </image>
    <view class="person-add__tip">上传经营资料</view>

    <view
      class="flex justify-between u-padding-20 person-add__content flex-wrap"
    >
      <view class="">
        <DeliverFileUpload
          :maxCount="1"
          :width="300"
          @success="onOneSuccess"
          @remove="onRemove"
        >
        </DeliverFileUpload>
        <view class="u-text-center"> 营业执照 </view>
      </view>
      <view class="">
        <DeliverFileUpload
          :maxCount="1"
          :width="300"
          @success="onTwoSuccess"
          @remove="onRemove"
        >
        </DeliverFileUpload>
        <view class="u-text-center"> 场地所有权正面租赁合同 </view>
      </view>
      <view class="u-m-t-20">
        <DeliverFileUpload
          :maxCount="1"
          :width="300"
          @success="onThreeSuccess"
          @remove="onRemove"
        >
        </DeliverFileUpload>
        <view class="u-text-center"> 公司门头照 </view>
      </view>
      <view class="u-m-t-20">
        <DeliverFileUpload
          :maxCount="1"
          :width="300"
          @success="onFourSuccess"
          @remove="onRemove"
        >
        </DeliverFileUpload>
        <view class="u-text-center"> 经营场景照片 </view>
      </view>
    </view>
    <u-form :model="form" ref="uForm" class="person-add__form u-m-t-20">
      <u-form-item label="企业名称" label-width="200rpx" class="ml-20 mr-20"
        ><u-input v-model="form.companyName" placeholder="请输入企业名称"
      /></u-form-item>
      <u-form-item label="统一信用码" label-width="200rpx" class="ml-20 mr-20"
        ><u-input
          v-model="form.busiLicenseCode"
          placeholder="输入营业执照上的信用代码"
      /></u-form-item>
      <u-form-item label="法人代表姓名" label-width="200rpx" class="ml-20 mr-20"
        ><u-input v-model="form.legalName" placeholder="" disabled="true"
      /></u-form-item>
      <u-form-item
        label="营业执照有效期"
        label-width="250rpx"
        class="ml-20 mr-20"
      >
        <u-radio-group v-model="radio" class="person-add__date-group">
          <u-radio key="1" name="有效期" :disabled="false">
            有效期
            <view class="person-add__end-date"
              ><u-input
                v-model="form.busiLicensePeriod"
                type="select"
                placeholder="结束时间"
                @click="showDate = true"
              />
              <u-picker
                mode="time"
                v-model="showDate"
                :params="dateParams"
                @confirm="checkDeadDate"
              ></u-picker>
            </view>
          </u-radio>
          <u-radio key="2" name="永久有效"> 长期 </u-radio>
        </u-radio-group>
      </u-form-item>
    </u-form>
    <u-button
      class="m-20"
      type="primary"
      :custom-style="customStyle"
      @click="nextStep()"
      >下一步</u-button
    >
  </view>
</template>

<script>
import city from '@/components/city/city.vue';
import DeliverFileUpload from '@/components/DeliverFileUpload/DeliverFileUpload.vue';
export default {
  components: {
    city,
    DeliverFileUpload,
  },
  data() {
    return {
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
      },
      cityTip: '省/市/区',
      showCity: false,
      showDate: false,
      dateParams: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      form: {
        licenseImg: '',
        securitiesImg: '',
        doorImg: '',
        premisesImg: '',
        companyName: '',
        busiLicenseCode: '',
        legalName: '', //人像
        busiLicensePeriod: '', //永久传0
      },
      fileList: [],
      radio: '有效期',
      ocrParam: {
        path: '',
        ocrType: 'BUSINESS_LICENSE',
      },
      basicForm: {},
    };
  },
  // onLoad自带一个参数
  onLoad(options) {
    this.basicForm = JSON.parse(options.basicForm);
    this.form.legalName = this.basicForm.legalName;
    console.log('this.basicForm----->153', this.basicForm);
  },
  mounted() {
    // this.basicForm = JSON.parse( decodeURIComponent(this.$route.query.basicForm) );
    // this.form.legalName = this.basicForm.legalName;
    // console.log('this.basicForm----->153', this.basicForm);
  },
  methods: {
    selectCity(Object) {
      console.log('Object=' + JSON.stringify(Object));
      this.form.provinceCode = Object.accountProvince;
      this.form.cityCode = Object.accountCity;
      this.form.areaCode = Object.accountArea;
    },
    checkDeadDate(e) {
      console.log('e=' + JSON.stringify(e));
      this.form.legalIdCardValidity = e.year + e.month + e.day;
    },
    onRemove(index) {
      this.fileList.splice(index, 1);
    },
    onTwoSuccess(filePath) {
      this.fileList.push(filePath);
      this.form.securitiesImg = filePath;
    },
    onThreeSuccess(filePath) {
      this.fileList.push(filePath);
      this.form.doorImg = filePath;
    },
    onFourSuccess(filePath) {
      this.fileList.push(filePath);
      this.form.premisesImg = filePath;
    },
    onOneSuccess(filePath) {
      this.fileList.push(filePath);
      this.form.licenseImg = filePath;
      //0cr接口
      this.getOcrRead(filePath);
    },
    getOcrRead(filePath) {
      const _that = this;
      _that.ocrParam.path = filePath;
      this.$zx.common_api.getOCRRead(this.ocrParam).then((data) => {
        console.log('getOCRRead----->191', data.words_result);
        if (data.words_result) {
          _that.form.companyName = data.words_result.单位名称.words;
          _that.form.busiLicenseCode = data.words_result.社会信用代码.words;
        }
      });
    },
    nextStep() {
      const _that = this;

      if (!_that.form.licenseImg) {
        uni.$zx.msg('请上传营业执照', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.securitiesImg) {
        uni.$zx.msg('请上传场地所有权照片', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.doorImg) {
        uni.$zx.msg('请上传门头照', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.premisesImg) {
        uni.$zx.msg('请上传经营场景照片', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.companyName) {
        uni.$zx.msg('请输入企业名称', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.busiLicenseCode) {
        uni.$zx.msg('请输入统一信用码', {
          duration: 4000,
        });
        return;
      }
      if (!_that.radio == '有效期') {
        if (!_that.form.busiLicensePeriod) {
          uni.$zx.msg('请选择身份证有效期', {
            duration: 4000,
          });
          return;
        }
      } else {
        _that.form.busiLicensePeriod = '0';
      }

      console.log('param=252' + JSON.stringify(_that.form));
      this.$u.route({
        url: 'pages/business/addCompanyThird',
        params: {
          // basicForm: encodeURIComponent(JSON.stringify(_that.basicForm)),
          // companyForm: encodeURIComponent(JSON.stringify(_that.form)),
          basicForm: JSON.stringify(_that.basicForm),
          companyForm: JSON.stringify(_that.form),
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.person-add {
  &__top {
    width: 100%;
  }

  &__content {
    background-color: white;
  }

  &__tip {
    background-color: #f6f6f6;
    height: 70rpx;
    line-height: 70rpx;
    padding: 0 20rpx;
    font-size: 12px;
  }

  &__form {
    background-color: white;
  }

  &__date-group {
    display: flex;
    flex-direction: column;
  }

  &__end-date {
    width: 200rpx;
    margin-left: 20rpx;
    display: inline-block;
  }
}
</style>
